<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>页面</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css">
  
</head>

<body>
  <div class="index">
    <div class="top">
      <img src="./images/logo.png" class="logo" alt="">
      <div class="top-right">
        <img src="./images/msg.png" class="msg" alt="">
        <img src="./images/msg1.png" class="msg1" alt="">
        <div class="add">+ &nbsp&nbsp&nbsp添加设备</div>
        <img src="./images/cd.png" class="cd" alt="">
      </div>
    </div>
    <div class="cont" id="height">
      <div class="left">
        <div class="item active">
          <div class="icon"></div>
          <p class="text">房间1</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间2</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间3</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间4</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间5</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间6</p>
          <div class="yjt"></div>
        </div>
        <div class="item">
          <div class="icon"></div>
          <p class="text">房间7</p>
          <div class="yjt"></div>
        </div>
      </div>
      <div class="right">
        <div class="swiper-container"  id="swiper_cont">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间1</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间2</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间3</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间4</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间5</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间6</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-top">
                <p class="line"></p>
                <p class="text">房间7</p>
              </div>
              <div class="circle-item">
                <div class="c-item">
                  <div class="first circle">
                    <p class="c-text">PM2.5</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM2.5</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="second circle">
                    <p class="c-text">PM1</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM1</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="third circle">
                    <p class="c-text">PM10</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">PM10</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="four circle">
                    <p class="c-text">HCHO</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">HCHO</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="five circle">
                    <p class="c-text">CO2</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">CO2</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="six circle">
                    <p class="c-text">温度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">温度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
                <div class="c-item">
                  <div class="seven circle">
                    <p class="c-text">湿度</p>
                  </div>
                  <div class="c-right">
                    <p class="c-top">湿度</p>
                    <p class="c-text">-1 <span>ug/m³</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="./js/circle-progress.js"></script>
<script>
  $(function () {
    var width = document.body.clientWidth;
    setTimeout(()=>{
      var height = document.getElementById('height').clientHeight;
      $('.cont .left').css('height',height +'px')
    },0)
    $(".cont .right").css('width', (width - 300) + 'px')
    var swiper = new Swiper('.swiper-container', {
      loop:true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '"></span>';
        },
      },
      autoplay: {
        disableOnInteraction: false,
        delay: 2500,
      },
      autoplayDisableOnInteraction : false,
      on: {
          slideChangeTransitionStart: function(){
           $('.left .item').removeClass('active')
           $('.left .item').eq(this.realIndex).addClass('active')
          },
        },
    });
    $("#swiper_cont").mouseenter(function(){
      swiper.autoplay.stop();
    }).mouseleave(function(){
      swiper.autoplay.start();
    })
    $('.left .item').click(function () {
      $('.left .item').removeClass('active')
      $(this).addClass('active')
      console.log($(this).index())
      swiper.slideTo($(this).index(), 1000, false)
    })
    $('.first.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#a47aec', '#78bce0']
      }
    });
    $('.second.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#83a6e9', '#638aee']
      }
    });
    $('.third.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#ce8086', '#886aca']
      }
    });
    $('.four.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#2c72e5', '#3eb5e4']
      }
    });
    $('.five.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#f19469', '#3eb5e4']
      }
    });
    $('.six.circle').circleProgress({
      value: 1,
      size: 145,
      fill: {
        gradient: ['#6dfaca', '#41bffa']
      }
    });
    $('.seven.circle').circleProgress({
      value: .5,
      size: 145,
      fill: {
        color: "#ffef7e"
      }
    });
  })
</script>

</html>